<template>
  <div>
    <cheader :title="title"></cheader>
    <div class="main_box">
      <el-button
        type="primary"
        style="
            float: right;
            margin-right: 20px;
            margin-bottom: 20px;
            margin-top: 20px;
          "
        @click="handle"
      >
        返回</el-button
      >
      <div class="main-c">
        <el-form
          :model="userForm"
          ref="userForm"
          label-width="120px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <div class="content">
            <div class="content_left">
              <el-form-item label="头像" prop="avatar">
                <!-- <el-upload
  class="avatar-uploader"
  action="/applet-api/ud/u/{modelName}"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> -->
                <!-- <el-avatar :size="60" :src="userForm.avatar" @click="uploadAvatar" @error="errorHandler"> -->
                <!-- </el-avatar> -->
              </el-form-item>
            </div>
            <div class="content_right">
              <div class="item">
                <span class="item_title">账号信息</span>
                <el-row class="item_content">
                  <el-col :span="12">
                    <el-form-item label="登陆账号" prop="userName">
                      <el-input v-model="userForm.userName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12"
                    ><el-form-item label="用户昵称">
                      <el-input
                        v-model="userForm.nickName"
                      ></el-input> </el-form-item
                  ></el-col>
                </el-row>
              </div>
              <div class="item">
                <span class="item_title">个人信息</span>
                <el-row class="item_content">
                  <el-col :span="12">
                    <el-form-item label="员工姓名" prop="emplName">
                      <el-input v-model="userForm.emplName"></el-input>
                    </el-form-item>
                    <el-form-item label="员工性别" prop="gender">
                      <el-select
                        v-model="userForm.gender"
                        placeholder="请选择性别"
                        @change="changeGender"
                      >
                        <el-option
                          v-for="item in genderList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="民族" prop="nation">
                      <el-input v-model="userForm.nation"></el-input>
                    </el-form-item>
                    <el-form-item label="婚姻状况" prop="marriageStatus">
                      <el-select
                        v-model="userForm.marriageStatus"
                        placeholder="请选择婚姻状况"
                        @change="changeMarriageStatus"
                      >
                        <el-option
                          v-for="item in marriageStatusList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="毕业院校" prop="school">
                      <el-input v-model="userForm.school"></el-input>
                    </el-form-item>

                    <el-form-item label="最高学历" prop="education">
                      <el-select
                        v-model="userForm.education"
                        placeholder="请选择最高学历"
                        @change="changeEducation"
                      >
                        <el-option
                          v-for="item in educationList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="籍贯" prop="nativePlace">
                      <el-input v-model="userForm.nativePlace"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12"
                    ><el-form-item label="出生年月" prop="birthday">
                      <el-date-picker
                        v-model="userForm.birthday"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @change="changeBirthday"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="政治面貌" prop="politicalStatus">
                      <el-select
                        v-model="userForm.politicalStatus"
                        placeholder="请选择政治面貌"
                        @change="changePoliticalStatus"
                      >
                        <el-option
                          v-for="item in politicalStatusList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select> </el-form-item
                    ><el-form-item label="血型" prop="bloodType">
                      <el-select
                        v-model="userForm.bloodType"
                        placeholder="请选择血型"
                        @change="changeBloodType"
                      >
                        <el-option
                          v-for="item in bloodTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="健康状况">
                      <el-select
                        v-model="userForm.healthStatus"
                        placeholder="请选择健康状态"
                        @change="changeHealthStatus"
                      >
                        <el-option
                          v-for="item in healthStatusList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="所学专业">
                      <el-input v-model="userForm.major"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idCard">
                      <el-input v-model="userForm.idCard"></el-input>
                    </el-form-item>
                    <el-form-item label="参加工作时间" prop="workingTime">
                      <el-date-picker
                        v-model="userForm.workingTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @change="changeWorkingTime"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="item">
                <span class="item_title">公司信息</span>
                <el-row class="item_content">
                  <el-col :span="12">
                    <el-form-item label="工作证号" prop="workNum">
                      <el-input v-model="userForm.workNum"></el-input>
                    </el-form-item>

                    <el-form-item label="入厂时间" prop="entryTime">
                      <el-date-picker
                        v-model="userForm.entryTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @change="changeEntryTime"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="所属车间班组" prop="teamId">
                      <el-input v-model="userForm.teamId"></el-input>
                    </el-form-item>

                    <el-form-item
                      label="家庭联系电话"
                      prop="homePhone"
                      :rules="[
                        { required: true, message: '家庭联系电话不能为空' }
                      ]"
                    >
                      <el-input v-model="userForm.homePhone"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="现任职务" prop="positionName">
                      <el-input v-model="userForm.positionName"></el-input>
                    </el-form-item>

                    <el-form-item label="所属岗位" prop="positionId">
                      <el-input v-model="userForm.positionName"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号码" prop="mobile">
                      <el-input v-model="userForm.mobile"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <!-- <el-form-item label="员工类别" prop="education">
            <el-select
              v-model="userForm.education"
              placeholder="请选择员工类别"
              @change="changeEducation"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item label="家庭住址" prop="homeAddress">
            <el-input v-model="userForm.homeAddress"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="userForm.telephone"></el-input>
          </el-form-item> -->
          <div style="text-align:center">
            <el-form-item style="padding-bottom: 50px;">
              <el-button type="primary" @click="createUser">提交</el-button>
              <el-button @click="reset">清除查询条件</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import cheader from '@/components/header.vue'
import { formatDate } from '@/utils/utils'
import { createUser } from '@/api/permission'
export default {
  // props: {
  //   title: {
  //     type: String,
  //   },
  // },
  data() {
    return {
      title: '编辑员工',
      userInfo: {},
      userForm: {
        avatarPath: '',
        emplName: '',
        nickName: '',
        userName: '',
        gender: '',
        birthday: '',
        politicalStatus: '',
        bloodType: '',
        marriageStatus: '',
        healthStatus: '',
        education: '',
        major: '',
        workNum: '',
        nativePlace: '',
        entryTime: '',
        positionId: '',
        positionName: '',
        teamId: '',
        workingTime: '',
        school: '',
        homePhone: '',
        mobile: '',
        homeAddress: '',
        telephone: '',
        idCard: ''
      },
      genderList: [
        {
          value: 0,
          label: '未知'
        },
        {
          value: 1,
          label: '男'
        },
        {
          value: 2,
          label: '女'
        }
      ],
      bloodTypeList: [
        {
          value: 0,
          label: '未知'
        },
        {
          value: 1,
          label: 'A'
        },
        {
          value: 2,
          label: 'B'
        },
        {
          value: 3,
          label: 'O'
        },
        {
          value: 4,
          label: 'AB'
        }
      ],
      educationList: [
        {
          value: 0,
          label: '未知'
        },
        {
          value: 1,
          label: '博士'
        },
        {
          value: 2,
          label: '硕士'
        },
        {
          value: 3,
          label: '本科'
        },
        {
          value: 4,
          label: '专科'
        },
        {
          value: 5,
          label: '高中'
        },
        {
          value: 6,
          label: '初中'
        },
        {
          value: 7,
          label: '小学'
        }
      ],
      typeList: [
        {
          value: 1,
          label: '正式'
        },
        {
          value: 2,
          label: '劳务'
        },
        {
          value: 3,
          label: '实习'
        },
        {
          value: 4,
          label: '委培'
        },
        {
          value: 5,
          label: '其他'
        }
      ],
      healthStatusList: [
        {
          value: 0,
          label: '未知'
        },
        {
          value: 1,
          label: '良好'
        },
        {
          value: 2,
          label: '疾病'
        }
      ],
      marriageStatusList: [
        {
          value: 0,
          label: '未知'
        },
        {
          value: 1,
          label: '已婚'
        },
        {
          value: 2,
          label: '未婚'
        }
      ],
      politicalStatusList: [
        {
          value: 0,
          label: '未知'
        },
        {
          value: 1,
          label: '群众'
        },
        {
          value: 2,
          label: '党员'
        },
        {
          value: 3,
          label: '预备党员'
        },
        {
          value: 4,
          label: '团员'
        }
      ],
      rules: {
        avatar: [
          { required: true, message: '头像不能为空', trigger: 'change' }
        ],
        emplName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        userName: [
          {
            pattern: /[\W]/,
            message: '请输入数字和字母',
            trigger: 'blur'
          },
          // /[\W]/g,''
          { required: true, message: '用户账号不能为空', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '出生年月不能为空', trigger: 'change' }
        ],
        nation: [{ required: true, message: '民族不能为空' }],
        politicalStatus: [
          { required: true, message: '政治面貌不能为空', trigger: 'change' }
        ],
        bloodType: [
          { required: true, message: '血型不能为空', trigger: 'change' }
        ],
        marriageStatus: [
          { required: true, message: '婚姻状况不能为空', trigger: 'change' }
        ],
        education: [
          { required: true, message: '学历不能为空', trigger: 'change' }
        ],
        positionId: [
          { required: true, message: '职务不能为空', trigger: 'blur' }
        ],
        workNum: [
          { required: true, message: '工作证号不能为空', trigger: 'blur' }
        ],
        nativePlace: [
          { required: true, message: '籍贯不能为空', trigger: 'blur' }
        ],
        entryTime: [
          { required: true, message: '入厂时间不能为空', trigger: 'change' }
        ],
        positionId: [
          { required: true, message: '所属岗位不能为空', trigger: 'blur' }
        ],
        teamId: [
          { required: true, message: '所属车间班组不能为空', trigger: 'blur' }
        ],
        workingTime: [
          {
            required: true,
            message: '参加工作时间不能为空',
            trigger: 'change'
          }
        ],
        school: [
          { required: true, message: '毕业院校不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: '请输入合法手机号码',
            trigger: 'blur'
          }
        ],
        homeAddress: [{ required: true, message: '家庭住址不能为空' }],
        telephone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: '请输入合法手机号码',
            trigger: 'blur'
          }
        ],
        idCard: [{ required: true, message: '身份证号不能为空' }]
      }
    }
  },
  created() {
    let userInfo = decodeURIComponent(this.$route.query.userInfo)
    this.userInfo = JSON.parse(userInfo)

    this.getUser()
  },
  components: {
    cheader
  },
  methods: {
    handle() {
      this.$router.go(-1)
    },
    // handleAvatarSuccess(res, file) {
    //     this.imageUrl = URL.createObjectURL(file.raw);
    //   },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        ths.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadAvatar() {},
    edit() {
      this.$router.push({
        path: '/user/userDetail/123'
      })
    },
    changeWorkingTime(val) {
      this.userForm.workingTime = val
    },
    changeEntryTime(val) {
      console.log('val', val)
      this.userForm.entryTime = val
    },
    changeEducation(val) {
      this.userForm.education = val
    },
    changeHealthStatus(val) {
      this.userForm.healthStatus = val
    },
    changeMarriageStatus(val) {
      this.userForm.marriageStatus = val
    },
    changeBloodType(val) {
      this.userForm.bloodType = val
    },
    changeGender(val) {
      this.userForm.gender = val
    },
    changePoliticalStatus(val) {
      this.userForm.politicalStatus = val
    },
    changeBirthday(val) {
      this.userForm.birthday = val
    },
    createUser() {
      this.$refs.userForm.validate(async (valid) => {
        if (valid) {
          const res = await createUser({
            // avatarPath: '',
            birthday: this.userForm.birthday,
            bloodType: this.userForm.bloodType,
            education: this.userForm.education,
            emplName: this.userForm.emplName,
            entryTime: this.userForm.entryTime,
            gender: this.userForm.gender,
            healthStatus: this.userForm.healthStatus,
            homeAddress: this.userForm.homeAddress,
            homePhone: this.userForm.homePhone,
            idCard: this.userForm.idCard,
            major: this.userForm.major,
            marriageStatus: this.userForm.marriageStatus,
            mobile: this.userForm.mobile,
            nation: this.userForm.nation,
            nativePlace: this.userForm.nativePlace,
            nickName: this.userForm.nickName,
            openId: this.userForm.openId,
            password: this.userForm.politicalStatus,
            politicalStatus: this.userForm.politicalStatus,
            positionId: this.userForm.positionId,
            remark: this.userForm.remark,
            school: this.userForm.school,
            teamId: this.userForm.teamId,
            telephone: this.userForm.telephone,
            userName: this.userForm.userName,
            workNum: this.userForm.workNum,
            workingTime: this.userForm.workingTime
          })
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '更新成功'
            })
            this.$router.push('/permission/staff')
          }
        } else {
          return false
        }
      })
    },
    reset() {
      this.userForm.healthStatus = ''
      this.userForm.major = ''
      this.$refs.userForm.resetFields()
    },
    getValueByLabel(value, objArr) {
      return objArr.find((item) => item.value === value).label
    },
    getLabelByValue(label, objArr) {
      return objArr.find((item) => item.label === label).value
    },
    getUser() {
      console.log('this.userInfo.birthday', this.userInfo.birthday)
      // const res = await getUser()
      // if (res.code == 200) {
      // this.userInfo = res.data
      this.userForm.avatar = this.userInfo.avatarPath
      this.userForm.emplName = this.userInfo.emplName
      this.userForm.gender = this.userInfo.gender
      this.userForm.birthday = formatDate(this.userInfo.birthday, 'yyyy-MM-dd')
      this.userForm.nation = this.userInfo.nation
      this.userForm.politicalStatus = this.userInfo.politicalStatus
      this.userForm.bloodType = this.userInfo.bloodType
      this.userForm.marriageStatus = this.userInfo.marriageStatus
      ;(this.userForm.healthStatus = this.userInfo.healthStatus),
        this.healthStatusList
      ;(this.userForm.education = this.userInfo.education), this.educationList
      this.userForm.major = this.userInfo.major
      this.userForm.positionId = this.userInfo.positionId
      this.userForm.workNum = this.userInfo.workNum
      this.userForm.nativePlace = this.userInfo.nativePlace
      // formatDate(this.userInfo.entryTime, 'yyyy-MM-dd')
      this.userForm.entryTime = formatDate(
        this.userInfo.entryTime,
        'yyyy-MM-dd'
      )
      this.userForm.positionName = this.userInfo.positionName
      this.userForm.teamId = this.userInfo.teamId
      this.userForm.workingTime = formatDate(
        this.userInfo.workingTime,
        'yyyy-MM-dd'
      )
      this.userForm.school = this.userInfo.school
      this.userForm.homePhone = this.userInfo.homePhone
      this.userForm.mobile = this.userInfo.mobile
      this.userForm.homeAddress = this.userInfo.homeAddress
      this.userForm.idCard = this.userInfo.idCard
      // }
      // console.log('userInfo', this.userInfo)
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert('submit!')
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    // },
    errorHandler() {
      return true
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="scss" scoped>
// .main {
//   width: 90%;
//   height: 620px;
//   background: #fff;
//   margin-left: 5%;
//   overflow: scroll;
//   position: relative;
//   .edit {
//     position: absolute;
//     top: 20px;
//     right: 20px;
//     width: 80px;
//     height: 35px;
//     background: rgba(0, 121, 254, 1);
//     text-align: center;
//     color: seashell;
//     line-height: 35px;
//     font-size: 14px;
//     border-radius: 5px;
//     cursor: pointer;
//   }
//   .main-c {
//     margin: 20px auto;
//     width: 45%;
//     height: 100%;
//   }
// }

.main_box {
  background: #fff;
  margin-bottom: 20px;
  padding-top: 40px;
}
.content {
  display: flex;
  width: 90%;
  justify-content: center;
}
.main-scroll {
  height: 1000px;
  // overflow-y: scroll;
}
.pagination {
  display: flex;
  justify-content: end;
}
.box-card {
  margin-bottom: 20px;
}
.el-input {
  width: 250px;
}
.el-select {
  width: 250px;
}
.item_title {
  font-size: 18px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #269cff;
  line-height: 27px;
}
.item {
  margin-bottom: 20px;
}
.item_content {
  border-top: 1px solid #269cff;
  padding-top: 30px;
}
</style>
